<!DOCTYPE html>
<html>

<head>
	<title></title>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
	<h1>{{param}}</h1>
	<h1>{{msg}}</h1>
	<img v-bind:src="imageSrc">

	<ul>
		<li is='compotent'>
			<compotent :params="param" url="www.baidu.com"> <template v-slot:default="ceshi">
			{{ceshi.url.firstName}}
			eeee
        </template>
    	</compotent>
		</li>
	</ul>
	
	<!-- 
	<compotent :params="param" url="www.baidu.com" >
		<template :slot="first">ssss</template>
	</compotent>
	<compotent :params="param" url="www.baidu.com"></compotent> -->

	

	<h1>表单</h1>
	<input type="text" name="name1" ref="name1">
	<button @click="add">添加	</button>
	<div v-for="date in date">
		<li ref="data">{{date.name}}</li>
	</div>

	<h1>组件2</h1>
	<anchored-heading :level="ss">Hello world!</anchored-heading>


</div>
</body>
</html>
<script src="./vue.js"></script>
<!-- HTML -->
<!-- <script type="text/x-template" id="anchored-heading-template">
    <h1 v-if="level === 1">
        1<slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
        2<slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
       3 <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
        4<slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
        5<slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
        6<slot></slot>
    </h6>
    1
</script> -->

<script type="text/javascript">
	Vue.component('compotent',{
		props:['params'],
		data(){
			return {
				url:{
					lastName:"Zhang",
                	firstName:"yue"
				}
			}
		},
		template:"<a v-bind:href='url.lastName' class='nav-link'><slot :url='url'></slot><slot name='first'></slot></a>",
		mounted: function() {
            console.log(777,this.$attrs);
        }


	});


	// Vue.component('anchored-heading', {
	//     template: '#anchored-heading-template',
	//     props: {
	//         level: {
	//             type: Number,
	//             required: true
	//         }
	//     },
	   
	// });

	Vue.component('anchored-heading', {
	    render: function (createElement) {
	    	console.log(999,createElement,'h' + this.level,this.$slots);
	    	console.log(10,this)
	        return createElement(
	            'h' + this.level,   // tag name 标签名称
	            this.$slots.default // 子组件中的阵列
	        )
	    },
	    props: {
	        level: {
	            type: Number,
	            required: true
	        }
	    }
	})


	var vm = new Vue({
		el:"#app",
		data(){
			return {
				param:"hah",
				msg:"sss",
				imageSrc:"C",
				url:'',
				first:"first",
				date:[
					{"name":"ceshi"},
					{"name":"ceshi1"},
					{"name":"ceshi2"}
				],
				ss:4
				// pp:'haha'

			}
		},
		methods:{
				ss:function(){

				},
				add:function(){
					console.log(9,this.$refs)
				}
		},
		created:function(){
			console.log(1,this.$data)
			console.log(2,this.$options)
			console.log(3,this.$parent)

		},
		mounted:function(){
			console.log(1,this.$el)
			console.log(2,this.$props)
			
			
		}
	})
	// console.log(1,vm.$parent)
	// console.log(2,vm.$root)
	
	// console.log(3,vm.$children)
	// console.log(4,vm.$refs)
	// console.log(5,vm.$isServer)
	
</script>



